<template>
  <div>
    <div style="margin-top: 80px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><span class="text-article">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article">社团快讯</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article" >{{ articleTypes[uid].name }}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<!--    侧边栏-->
    <div style="margin-left: 0;margin-top: 30px;">
      <el-row class="tac">
        <el-col :span="4" style="margin-top: 25px;">
          <el-menu
              :default-active="uid.toString()"
              class="el-menu-vertical-demo"
              >
            <div v-for="articleType in articleTypes">
              <el-menu-item :index="articleType.id.toString()" @click="toArticle(articleType.name)" >
                <span slot="title" v-if="articleType.name === ''">全部</span>
                <span slot="title" v-else>{{ articleType.name }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-col>
        <el-divider style="margin-left: 20%"></el-divider>
        <div style="float: left;margin-left: 20px;width: 80%">
            <router-view :key="key"></router-view>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import {articleByIdApi,articleTypeListApi} from '@/api'
export default {
  name: "ArticleA",
  data() {
    return {
      id: 0,
      articles:[],
      articleTypes: [],
      article: {},
      uid: 0,
      type: '',
    }
  },
  computed:{
    key() {
      return this.$route.path+Math.random();
    }
  },
  created() {
     this.id = this.$route.query.id;
     let article = {
       id: this.id,
       status:2
     };

    articleTypeListApi().then((result)=>{
       this.articleTypes = result.data;
       this.articleTypes.unshift({
         id:0,
         name: '',
       });
     })

     if (this.$route.query.id !=null ){
       articleByIdApi(article).then((result)=>{
          this.article = result.data;
          if (this.article.type === '重要通知'){
            this.uid = 1;
          }else{
            this.uid = 2;
          }
       });
     }else{
        this.uid = Number(this.$route.query.uid);
     }

  },

  methods: {
    toArticle(name){
      this.articleTypes.forEach((item ,index)=>{
        if (item.name === name){
          this.uid = index;
        }
      });
      this.$router.push({
        path: '/articleA',
        query: {
          uid: this.uid,
        }
      });
      // this.$router.go(0);
    }
  },

}
</script>

<style scoped>
.text-article{
  font-size: 1.5em;

}
</style>
